// 水平布局
#app {
  height: 100%;

  .navbar .sidebar-logo-container {
    .sidebar-logo-link .sidebar-title {
      display: inline-block;
    }
  }
  .navbar .sidebar-logo-container.collapse + #hamburger-container.horizontal {
    display: none;
  }
  .main-container-horizontal {
    min-width: 100%;
    transition: margin-top 0.28s;
    position: relative;
    background-color: #f6f8f9;
  }
  .sidebar-container-horizontal {
    transition: width 0.28s;
    background-color: $menuHorizontalBg;
    position: absolute;
    font-size: 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    margin-left: $sideBarWidthVertical !important;
    height: $navbarHeight !important;
    margin-right: 20%;

    .el-scrollbar {
      .el-menu--collapse {
        width: 100%;
      }

      .el-sub-menu {
        overflow: hidden;

        & > .el-sub-menu__title {
          padding: 0 !important;

          .svg-icon {
            margin-left: 20px;
          }

          .el-sub-menu__icon-arrow {
            display: inline-block;
          }
          span {
            display: inline-block;
          }
        }
      }
    }
  }

  .main-container-horizontal+.app-main {
    margin-left: 0 !important;
  }

  .el-sub-menu .el-sub-menu__icon-arrow {
    position: initial;
  }
}

.el-menu--horizontal {
  text-align: center;
  .nest-menu .el-submenu > .el-submenu__title,
  .el-menu-item {
    &:hover {
      // you can use $subMenuHover
      background-color: $menuHover !important;
    }
  }
  .el-sub-menu:is(.is-active) {
    .el-sub-menu__title {
      color: var(--el-menu-active-color);
    }
  }

  .el-sub-menu:hover {
    .el-sub-menu__title {
      color: var(--el-menu-active-color);
    }
  }
  .el-menu.el-menu--popup .nest-menu {
    a {
      text-decoration: none;
    }
    .is-active {
      background-color: #e0e9f3;
    }
  }

}
